<script  lang="ts" setup>
import { ref, reactive, nextTick } from 'vue';
import { useRouter } from 'vue-router';

import ticketUtil from "./ticketUtil.vue";
import reqApis from '../../../req/reqApis.js';

const router = useRouter();

const currentData = ref<any>({
  shopId: router.currentRoute.value.query.shopId,
  list: []
});

const getCouponListFn = () => {
  let params = {
    shopId: currentData.value.shopId
  }
  reqApis.getCouponListApi(params).then((res:any) => {
    if(res.data != null && res.data.length>0) {
      currentData.value.list.push(...res.data);
    }
  })
};

getCouponListFn();
</script>
<template>
  <section class="ticketBannerUtil">
    <div class="content">
      <ul>
        <li v-for="(item, index) in currentData.list" :key="index">
          <ticketUtil :ticket="item"></ticketUtil>
        </li>
      </ul>
    </div>
  </section>
</template>

<style lang="less" scoped>
.ticketBannerUtil {
  width: 3.75rem;
  margin-bottom: .1rem;
  .content {
    width: 3.55rem;
    padding: .05rem .1rem;
    box-sizing: border-box;
    background: white;
    border-radius: .04rem;
    margin: 0 auto;
    ul {
      display: flex;
      overflow-x: scroll;
      &::-webkit-scrollbar {
        display: none;
      }
      li {
        margin-right: 0rem;
        &:nth-last-child(1){
          margin-right: 0rem;
        }
      }
    }
  }

}
</style>

